<template>
  <div class="q-pa-md">
    <div style="color: blue"> </div>

    <div>
      openingStatement:<t-input
        v-model="copilotProps.openingStatement"
      ></t-input
      ><br />
      description:<t-input v-model="copilotProps.description"></t-input><br />
      sysPrompt:<t-input v-model="copilotProps.sysPrompt"></t-input><br />
      name:<t-input ref="refName" v-model="name"></t-input><br />
      <t-button @click="debu" color="primary" label="debu" />
      <t-button
        @click="updateCopilotVariables"
        color="primary"
        label="更新-variables"
      />
      <t-button
        @click="
          () => {
            variables.age++;
          }
        "
        color="primary"
        label="更新-variable age"
      />
      <t-button
        @click="updateCopilotVariablesWithWidget"
        color="primary"
        label="更新-updateCopilotVariablesWithWidget"
      />
    </div>

    {{ copilotProps }}

    {{ variables }}

    {{ rows }}

    <t-data-grid
      ref="dataGrid1"
      :rows="rows"
      :optColumns="optColumns"
      :row-key="rowKey"
      v-model:pagination="pagination"
      @request="onRequest"
    ></t-data-grid>

    <t-copilot
    ...
    :variables="computedVariables"
    @taiTool="onTaiToolHandler"
  >
  </t-copilot>



    <t-data-grid
      ref="dataGrid1"
      :rows="rows"
      :optColumns="optColumns"

    <t-copilot
      @taiTool="onTaiToolHandler"
      ref="refCopilot"
      v-bind="copilotProps"
      :variables="computedVariables"
    ></t-copilot>
  </div>
</template>

<script>
import options from '../data-grid/options';

import { useQuasar } from '@teld/q-components';
import { result, transform } from 'lodash';
import { computed, ref, watch } from 'vue';

export default {
  setup() {
    const $q = useQuasar();

    const refCopilot = ref(null);

    const rrrr = ref();

    fetch(`http://localhost:3004/users?_start=5&_limit=1`).then(
      async response => {
        debugger;
        rrrr.value = await response.json();
      },
    );

    const computedVariables = computed(() => {
      return {
        ...variables.value,
        rows: dataGrid1.value?.rows,
        // rrrr: rrrr.value,
        rows2: (()=>dataGrid1.value?.rows)(),
      };
    });

    let variables = ref({ name: '张三', age: 18, sex: '男' });

    let problems = [];

    let tools = [
      {
        id: '404ea154',
        icon: 'fas dx-icon icon-t-fund-fill',
        label: '常用功能',
        script: 'alert(1)',
      },
    ];

    let openingStatement = '开场白';
    let description = '功能说明';
    let sysPrompt = '你的名字${name}, 你今年${age}';

    const copilotProps = ref({
      problems,
      tools,
      openingStatement,
      description,
      sysPrompt,
    });

    const updateCopilotVariables = () => {
      refCopilot.value.updateVariables(variables.value);
    };

    const updateCopilotVariablesWithWidget = () => {
      alert(JSON.stringify(refCopilot.value.variables));
      refCopilot.value.variables.sex =
        refCopilot.value.variables.sex != '女' ? '女' : '男';
    };

    const onTaiToolHandler = e => {
      alert('onTaiToolHandler:' + JSON.stringify(e));
      eval(e.script);
      debugger;
    };

    const rows = ref([
      {
        ID: '8546e002-094c-40b3-b1f2-1884a0f2c08f',
        Code: 'oct_2534334077',
        Name: '9Z1Ql',
        Creator: 'dee8d312-af19-40eb-9c85-f0b9fd3d64e1',
        CreatorName: '郗艺涵',
        CreateTime: '2026-05-26T02:42:14.859Z',
        LastModifier: 'ce50667e-e26b-4a8f-a39b-0d80d9cb4749',
        LastModifierName: '夙文昊',
        LastModifyTime: '2021-01-25T00:54:23.377Z',
        Date: '2024-07-11T22:32:51.841Z',
        DateTime: '2025-02-24T17:26:46.084Z',
        Time: '2025-06-26T03:42:17.979Z',
        Boolean: true,
        Int: 2489112825167872,
        Float: 26.893334789201617,
        id: '7ca8',
      },
      {
        ID: '309eebc0-627c-48fd-acd2-ffdfbb985c02',
        Code: 'oct_2707575403',
        Name: '8uLgM',
        Creator: '50e24dc4-6d97-4307-a515-d19ced2cd2fc',
        CreatorName: '弓勇',
        CreateTime: '2025-05-06T21:35:44.273Z',
        LastModifier: 'f6725df7-7f38-4c6a-872f-74d45bed9f3a',
        LastModifierName: '长三锋',
        LastModifyTime: '2023-09-22T13:37:33.988Z',
        Date: '2025-08-16T07:56:59.978Z',
        DateTime: '2024-02-23T23:52:24.236Z',
        Time: '2025-03-19T03:55:01.024Z',
        Boolean: false,
        Int: 1462931944374272,
        Float: 49.70982011873275,
        id: 'c725',
      },
    ]);

    const pagination = ref({
      // sortBy: 'desc',
      // descending: false,
      page: 1,
      rowsPerPage: 3,
      rowsNumber: 2001,
    });

    const loading = ref(false);
    function onRequest(props) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination;
      const filter = props.filter;

      loading.value = true;

      setTimeout(() => {
        fetchFromServer(props.pagination, props.filter);
      }, 1500);
    }
    function fetchFromServer(_pagination, filter) {
      const { page, rowsPerPage, sortBy, descending, rowsNumber } = _pagination;
      const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

      // calculate starting row of data
      const startRow = (page - 1) * rowsPerPage;

      fetch(
        `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
      ).then(response => {
        response.json().then(movies => {
          // rows.value = movies;
          // clear out existing data and add new
          rows.value.splice(0, rows.value.length, ...movies);

          // don't forget to update local pagination object
          pagination.value.rowsNumber = 2001;
          pagination.value.page = page;
          pagination.value.rowsPerPage = rowsPerPage;
          pagination.value.sortBy = sortBy;
          pagination.value.descending = descending;

          loading.value = false;
        });
      });
    }
    const dataGrid1 = ref();

    const refName = ref(null);
    const name = ref('张三3');
    return {
      name,
      refName,
      refCopilot,
      variables,
      computedVariables,
      copilotProps: copilotProps,
      updateCopilotVariables,
      updateCopilotVariablesWithWidget,
      onTaiToolHandler,

      rowKey: options.idField,
      loading,
      onRequest,
      dataGrid1,
      pagination: pagination,
      optColumns: options.columns,
      rows,
      debu() {
        console.log('debug');
        debugger;
      },
    };
  },
};
</script>
